<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题在右</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .img_collection {
            width: 100%;
            display: flex;
        }

        .img_collection_left {
            width: 33.3%;
            display: flex;
            order: 3;
            box-sizing: border-box;
            background-image: url(https://20008980.s61i.faiusr.com/4/AD0IlKDFCRAEGAAgr-G86QUolPSZlwQwgAU4wAc.png);
            height: 823px;
            background-size: 100% 100%;
        }

        .img_collection_left .img_collection_title {
            margin: auto;
            width: 460px;
        }


        .img_collection_title_info {
            font-size: var(--f_describe);
            color: white;
            line-height: 40px;
            margin-bottom: 60px;
            -webkit-line-clamp: 3;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

        .img_collection_right {
            width: 66.6%;
            display: flex;
            order: 2;
            flex-wrap: wrap;
            box-sizing: border-box;
        }

        .img_collection_right li {
            width: 50%;
            height: 50%;
            display: flex;
            text-align: center;
            color: white;
        }

        .img_collection_right li .img_collection_right_box {
            margin: auto;
        }

        .img_collection_right li {
            background-size: 100% 100%;
        }

        .img_collection_right li:nth-child(1) {
            background-image: url(../images/img_collection_5_1.png);
        }

        .img_collection_right li:nth-child(2) {
            background-image: url(../images/img_collection_5_2.png);
        }

        .img_collection_right li:nth-child(3) {
            background-image: url(../images/img_collection_5_3.png);
        }

        .img_collection_right li:nth-child(4) {
            background-image: url(../images/img_collection_5_4.png);
        }

        .img_collection_right_box h3 {
            font-size: 20px;
            line-height: 28px;
        }

        .img_collection_right_box p {
            font-size: 14px;
            line-height: 25px;
        }

        @media (max-width:1240px) {
            .img_collection {
                flex-wrap: wrap;
            }

            .img_collection_left {
                width: 100%;
                height: 480px;
                order: 1;
            }

            .img_collection_right {
                width: 100%;
            }
            .img_collection_right li {height: 300px;}

        }
        @media (max-width:768px) {
            .img_collection_left .img_collection_title{
                width: 100%;
                padding: 0 50px;
            }
            .img_collection_left{
                height: 384px;
            }
            .img_collection_title_info{
                margin-bottom: 20px;
                -webkit-line-clamp:4;
            }
            .img_collection_right li{
                width: 100%;
                height: 100px;
                background-size: 100% auto;
                background-position: center;
            }
            .img_collection_right_box h3{
                font-size: 16px;
            }

        }
    </style>
</head>

<body>
    <div class="img_collection modular">
        <div class="img_collection_left">
            <div class="img_collection_title">
                <div class="public_title ">
                    <h2>服务范围</h2>
                    <p>SERVICE AREA</p>
                </div>
                <p class="img_collection_title_info">
                    多样、简明、质感，采用高质量的纸张，
                    根据客户的需求，专业提供名片设计定制以及印刷服务，
                    让您的印刷品变成艺术品。德国进口海德堡五色，
                    能以快的速度完成客户的各种印刷要求。
                </p>
                <a href="" class="button_small">MORE+</a>
            </div>

        </div>
        <ul class="img_collection_right">
            <li>
                <div class="img_collection_right_box">
                    <h3>标签印刷</h3>
                    <p>Label Printing</p>
                    <span>——</span>
                </div>
            </li>
            <li>
                <div class="img_collection_right_box">
                    <h3>标签印刷</h3>
                    <p>Label Printing</p>
                    <span>——</span>
                </div>
            </li>
            <li>
                <div class="img_collection_right_box">
                    <h3>标签印刷</h3>
                    <p>Label Printing</p>
                    <span>——</span>
                </div>
            </li>
            <li>
                <div class="img_collection_right_box">
                    <h3>标签印刷</h3>
                    <p>Label Printing</p>
                    <span>——</span>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>